<template>
  <div id="main">
    <Header />
    <Nav active="5" />
    <div class="digital">
      <div class="digital-center">
        <div class="cen-top">数字化水平评测介绍</div>
        <div class="tit_hr"> </div>
        <div class="cen_con">
          为助力中小企业数字化转型，受工业和信息化部委托，中国工业互联网研究院联合13个企事业单位共同研究制定了中小企业数字化水平评价标准。根据行业特点，分为制造业、生产性服务业、其他行业三个类别，从数字化基础、经营、管理、成效四个维度综合评估中小企业数字化发展水平，并依据企业评测得分，将数字化水平划分为四个等级。广大中小企业可根据自身实际情况通过此平台完成自测。
        </div>
        <div class="btn_list">
          <div class="btn_fir" style="margin-right: 90px;">
            <a href="http://caii-sme.indusforce.com/#/logs">
              <div class="link-i">
                <i class="el-icon-edit"></i>
              </div>
              <div class="link-text">
                自测答题
              </div>
            </a>
          </div>
          <div class="btn_fir">
            <a href="http://caii-sme.indusforce.com/#/logs">
              <div class="link-i">
                <img src="@/assets/images/del/book-open.png">
              </div>
              <div class="link-text">
                评测结果
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <Link />
    <Floor />
  </div>
</template>

<script>
import Floor from '@/views/login/component/Floor'
import Link from '@/views/login/component/Link'
import Header from '@/views/login/component/Header'
import Nav from '@/views/login/component/Nav'

export default {
  name: "index",
  components: {
    Floor,
    Link,
    Header,
    Nav
  },
  data() {
    return {
      activeIndex: '5',
    }
  },
  methods: {
    handleSelect(key, keyPath) {
    },
    redirectTologin() {
      this.$router.push({ path: '/login', query: { redirect: '/' } });
    },
    redirectToblogin() {
      window.open("/blogin");
    },
    redirectToJFY() {
      window.open("https://www.fjjfypt.com/jfy/home/index", "_blank");
    },
    goTo(path) {
      this.$router.push(path);
    },
  }
}
</script>

<style lang="scss" scoped>
#main {
  width: 100%;
  background: #ffffff;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 0.2fr auto 0.8fr;
  gap: 0px 0px;
  grid-template-areas:
    'head head head head'
    'nav nav nav nav'
    'digital digital digital digital'
    'friendship-link friendship-link friendship-link friendship-link'
    'footer footer footer footer';
}
.digital {
  grid-area: digital;
  background: url('~@/assets/images/del/blue_notification.png') no-repeat;
  background-size: 100% 100%;

  .digital-center {
    position: relative;
    margin: 0 auto;
    width: 748px;
    height: 500px;
    background: url('~@/assets/images/del/blue_box.png') no-repeat;
    background-size: 100% 100%;
    object-fit: contain;

    .cen-top {
      position: absolute;
      top: 122px;
      left: 270px;
      font-size: 25px;
      font-family: 'AlimamaDongFangDaKai-Regular';
      text-align: center;
      color: #2eeaff;
    }

    .tit_hr {
      position: absolute;
      top: 157px;
      left: 123px;
      background: url(/static/img/blue_box.19b1e262.png) no-repeat;
      background-size: 100% 100%;
      height: 9px;
      width: 65%;
    }

    .cen_con {
      position: absolute;
      top: 173px;
      left: 131px;
      width: 480px;
      height: 140px;
      overflow: auto;
      font-size: 16px;
      font-weight: 400;
      text-align: justify;
      text-indent: 2em;
      color: #ffffff;
    }

    .btn_list {
      position: absolute;
      bottom: 140px;
      left: 136px;
      display: flex;

      .btn_fir {
        width: 194px;
        height: 46px;
        border-radius: 6px;
        background: linear-gradient(180deg, #18e8ff 0%, #007bd3 100%);
        box-shadow: 0 4px 10px 0 #0000004d;
        .link-i,
        i {
          width: 20%;
          font-size: 16px;
          font-weight: bold;
        }

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0px 10px 8px 5px rgba(24, 144, 255, 0.5);
        }

        // &:first-child {
        //   background: linear-gradient(to right, #034373, #1890ff);
        // }

        // &:last-child {
        //   background: linear-gradient(to right, #1890ff, #3eb8f1);
        // }

        a {
          width: 100%;
          height: 100%;
          text-decoration: none;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          color: #ffffff;
        }

        .link-text {
          font-size: 16px;
          font-family: 'AlimamaDongFangDaKai-Regular';
        }
      }
    }
  }
}

@font-face {
  font-family: 'AlimamaDongFangDaKai-Regular';
  src: url('~@/assets/fonts/AlimamaDongFangDaKai-Regular.otf');
}
</style>
